<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <link rel="stylesheet" href="../css/bootstrap-table.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script src="../js/bootstrap-table.min.js"></script>
    <script src="../js/bootstrap-table-zh-CN.min.js"></script>
    <style>
        .chang{
            width: 40%;
            display: inline-block;
            text-align:right;
        }
        .dchang{
            width: 50%;
            display: inline-block;
        }
        .aa{
            display: inline-block;
            width: 50%;
        }
        .dropdownbox{
            width: 60%;
        }
        .ichang{
            width: 60%;
        }
    </style>
</head>
<body>
<div class="row">
    <div class="col">
        请选择产品I级分类:
        <select id="one" class="form-control">
            <option value="">请选择</option>
            <option>电子</option>
        </select>
    </div>
    <div class="col">
        请选择产品II级分类:
        <select id="tow" class="form-control">
            <option value="">请选择</option>
            <option>计算机</option>
        </select>
    </div>
    <div class="col">
        请选择产品III级分类:
        <select id="throws" class="form-control">
            <option value="">请选择</option>
            <option >服务器</option>
        </select>
    </div>
    <div class="col">
        <button onclick="f()" class="btn btn-primary" style="margin-top: 21px">查询</button>
    </div>
</div>
<hr/>
<div>
    <table id="tab"></table>
</div>

<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-xl" >
        <div class="modal-content" >

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h5 class="modal-title">产品设计</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body" style="background-color: darkgray;">
                <div style="width: 100%;text-align: right">
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal1">添加物料</button>
                    <button type="button" onclick="removeMaterial()" class="btn btn-primary btn-sm">删除物料</button>
                    <button type="button" onclick="material()"  class="btn btn-primary btn-sm">提交物料</button>
                    <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">返回</button>
                </div>
                <div style="border: 1px solid black;background-color: white;">
                    <h4 style="text-align: center;margin-top: 20px">物料组成设计单</h4>
                    <div style="display: flex;">
                        <div  style="margin-left: 10px;width: 50%;" >产品名称：<span id="productName"></span></div>
                        <div style="width: 50%;display: flex">产品编号：<span id="query_designId"></span></div>
                    </div>
                    <div  style="display: flex;margin-top: 5px;">
                        <div  style="margin-left: 10px;" >设计人：<input type="text" id="designer" style="border-bottom: 1px solid #000000;border-top: 0px;border-right: 0px;border-left: 0px"></div>
                    </div>
                    <div style="display: flex;margin-top: 20px">
                        <table class="table table-bordered table-sm">
                            <thead>
                            <tr style="background-color: lightskyblue">
                                <td>点选</td>
                                <td>物料编号</td>
                                <td>物料名称</td>
                                <td>用途类型</td>
                                <td>描述</td>
                                <td>数量</td>
                                <td>单位</td>
                                <td>计划成本单价（元）</td>
                                <td>小计（元）</td>
                            </tr>
                            </thead>
                            <tbody id="tabMaterial">
                            </tbody>
                        </table>
                    </div>
                    <div  style="display: flex;margin-top: 5px;">
                        <div  style="margin-left: 10px;width: 50%;" >登记人：<span id="register"></span></div>
                        <div  style="margin-left: 10px;width: 50%;" >登记时间：<span id="registerTime"></span></div>
                    </div>
                    <div style="display: flex;">
                        <div style="margin: 20px 10px;display: flex;width: 100%">
                                <div class="input-group" >
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">设计要求</span>
                                    </div>
                                    <textarea id="moduleDescribe" class="form-control" aria-label="With textarea"></textarea>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 模态框底部 -->
        </div>
    </div>
</div>

<!-- 按钮：用于打开模态框 -->

<!-- 模态框 -->
<div class="modal fade" id="myModal1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">物料添加</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body" style="height: 450px">
                <table id="tab1"></table>
            </div>
            <div style="width: 100%;text-align: right;"><button type="button" class="btn btn-primary" data-dismiss="modal">返回</button></div>
        </div>
    </div>

</div>
<script>
    $(function () {
        $("#tab").bootstrapTable({
            //请求方式  get请求中文会乱码，建议使用post请求
            method: 'post',
            //请求头部的设置
            contentType: 'application/json',
            //url
            url: '/designModule/notMaterial',
            //设置交替行样式
            striped: true,
            //初始显示页号
            pageNumber: 1,
            //是否显示分页
            pagination: true,
            //设置是服务端分页还是客户端分页
            sidePagination: 'server',
            //页大小
            pageSize: 5,
            //分页列表
            pageList: [3, 5, 6, 10],
            //上传到服务端的参数
            queryParams: function (params) {
                return {
                    // 计算页号(当前页)
                    pageNumber: (params.offset / params.limit) + 1,
                    // 计算页大小
                    pageSize: params.limit,
                    querySearch:{
                        firstKindName:$("#one").val(),
                        secondKindName:$("#tow").val(),
                        thirdKindName:$("#throws").val(),
                    }

                };
            },
            // 定义列名
            columns: [
                {title: '产品编号', field: 'productId', align: 'center'},
                {title: '产品名称', field: 'productName', align: 'center'},
                {title: '档次级别', field: 'productClass', align: 'center',
                    formatter: function (value,row,index){
                        if(value=="d001-1"){
                            return "高档";
                        }else if(value="d001-2"){
                            return "中档"
                        }else{
                            return "低档"
                        }
                    }
                },
                {title: 'I级分类', field: 'firstKindName', align: 'center'},
                {title: 'II级分类', field: 'secondKindName', align: 'center'},
                {title: 'III级分类', field: 'thirdKindName', align: 'center'},
                {title: '用途类型', field: 'type', align: 'center',
                    formatter: function (value,row,index){
                        return value=="y001-1"?"商品":"物料"
                    }},
                {title: '产品经理', field: 'responsiblePerson', align: 'center'},
                {title: '操作', field: 'checkTag', align: 'center',
                    formatter:function (value,row,index){
                        var btn1 = "<button class=\"btn btn-primary  btn-sm\" data-toggle='modal' data-target='#myModal' onclick='givevalue("+JSON.stringify(row)+")'>物料添加</button>";
                        return btn1;
                    }
                }
            ]
        })

    })

    $(function () {
        $("#tab1").bootstrapTable({
            //请求方式  get请求中文会乱码，建议使用post请求
            method: 'post',
            //请求头部的设置
            contentType: 'application/json',
            //url
            url: '/designModule/Material',
            //设置交替行样式
            striped: true,
            //初始显示页号
            pageNumber: 1,
            //是否显示分页
            pagination: true,
            //设置是服务端分页还是客户端分页
            sidePagination: 'server',
            //页大小
            pageSize: 5,
            //分页列表
            pageList: [3, 5, 6, 10],
            //上传到服务端的参数
            queryParams: function (params) {
                return {
                    // 计算页号(当前页)
                    pageNumber: (params.offset / params.limit) + 1,
                    // 计算页大小
                    pageSize: params.limit,
                    querySearch:{
                        firstKindName:$("#one").val(),
                        secondKindName:$("#tow").val(),
                        thirdKindName:$("#throws").val(),
                    }

                };
            },
            // 定义列名
            columns: [
                {title: '产品编号', field: 'productId', align: 'center'},
                {title: '产品名称', field: 'productName', align: 'center'},
                {title: '档次级别', field: 'productClass', align: 'center',
                    formatter: function (value,row,index){
                        if(value=="d001-1"){
                            return "高档";
                        }else if(value="d001-2"){
                            return "中档"
                        }else{
                            return "低档"
                        }
                    }
                },
                {title: 'I级分类', field: 'firstKindName', align: 'center'},
                {title: 'II级分类', field: 'secondKindName', align: 'center'},
                {title: 'III级分类', field: 'thirdKindName', align: 'center'},
                {title: '用途类型', field: 'type', align: 'center',
                    formatter: function (value,row,index){
                        return value=="y001-1"?"商品":"物料"
                    }},
                {title: '操作', field: 'checkTag', align: 'center',
                    formatter:function (value,row,index){
                        var btn1 = "<button class=\"btn btn-primary  btn-sm\" onclick='addMaterial("+JSON.stringify(row)+")'>添加</button>";
                        return btn1;
                    }
                }
            ]
        })

    })
    function f() {
        $("#tab").bootstrapTable("refresh");
    }
    function addMaterial(row){
            $("#tabMaterial").append("<tr>" +
            "<td><input type='checkbox' value='"+row.id+"'></td>" +
            "<td>"+row.productId+"</td>" +
            "<td>"+row.productName+"</td>" +
            "<td>物料</td>"+
            "<td>"+row.productDescribe+"</td>" +
            "<td><input type='text' class='number'></td>" +
            "<td>"+row.amountUnit+"</td>" +
            "<td>"+row.costPrice+"</td>" +
            "<td></td>"+
            "</tr>")
    }
    $("#tabMaterial").on("change",".number",function(){
        var price=parseInt($(this).parent().next().next().text());
        $(this).parent().next().next().next().text(price*parseInt($(this).val()));


    })
    function removeMaterial(){
        var n=$("#tabMaterial :checked").length;
        if(n>0){
                $("#tabMaterial tr:has(:checked)").remove();
        }else{
            alert("请选择需要删除的行")
        }
    }
    function material(){
        var ss;
        $("#tabMaterial tr").each(function (i,n){
            if(parseInt($(n).find("td").eq(8).text())){
                ss=0
            }else {
                ss=1
            }
        })
        var money=0;
        if($("#tabMaterial tr").length>0 && $("#designer").val()!="" && $("#designer").val()!=null && ss==0){
            let dModuleDetails=new  Array();

            $("#tabMaterial tr").each(function (i,n){
                  money+=parseInt($(n).find("td").eq(8).text());
                dModuleDetails.push({
                        detailsNumber:$(n).find("td").eq(0).find("input").val(),
                        productId:$(n).find("td").eq(1).text(),
                        productName:$(n).find("td").eq(2).text(),
                        type:$(n).find("td").eq(3).text(),
                        productDescribe:$(n).find("td").eq(4).text(),
                        amount:$(n).find("td").eq(5).find("input").val(),
                        amountUnit:$(n).find("td").eq(6).text(),
                        residualAmount:$(n).find("td").eq(5).find("input").val(),
                        costPrice:$(n).find("td").eq(7).text(),
                        subtotal:$(n).find("td").eq(8).text()
                    })
            })
            console.log(dModuleDetails)
            let design = {
                productId: rows.productId,
                productName: rows.productName,
                firstKindId: rows.firstKindId,
                firstKindName: rows.firstKindName,
                secondKindId: rows.secondKindId,
                secondKindName: rows.secondKindName,
                thirdKindId: rows.thirdKindId,
                thirdKindName: rows.thirdKindName,
                designer: $("#designer").val(),
                moduleDescribe:$("#moduleDescribe").val(),
                costPriceSum:money,
                register:$("#register").text(),
                registerTime:$("#registerTime").text(),
                dmoduleDetails:dModuleDetails
            }

            $.ajax({
                type:'POST',
                url:'/designModule/addMaterial',
                contentType:'application/json',
                data:JSON.stringify(design),
                success:function (){
                    $("#tab").bootstrapTable("refresh");
                }
            })
            $("#myModal").modal("hide");
        }else {
            alert("没数据或数据有空缺都无法提交")
        }


    }


    function givevalue(row){
        rows=row;
        $("#tabMaterial").html("")
        var now = new Date().toLocaleString();
        $("#productName").text(row.productName);
        $("#query_designId").text(row.productId);
        $("#register").text(row.register);
        $("#registerTime").text(now);
    }
</script>
</body>
</html>